<template>
  <view class="supervisiondiary">
    <pit-search placeholder="请输入查询"></pit-search>
    <view class="supervisiondiary-content">
      <view v-for="(item,index) in supervisiondiarylist" :key="index" class="supervisiondiary-content-item">
        <view class="item-element">
          <view class="item-element-text1"
          :style="{
            backgroundColor: getBgColor(item.approvalStatus),
            color: getTextColor(item.approvalStatus)
          }"
          >{{item.approvalStatus}}</view>
          <text class="item-element-text2">{{item.fillingDate
}}</text>
        </view>
        <view class="item-element">
          <text class="item-element-title">编号：</text>
          <text class="item-element-content">{{item.businessCode}}</text>
        </view>
        <view class="item-element">
          <text class="item-element-title">施工标段：</text>
          <text class="item-element-content">{{item.bidName}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default{
    name:'pit-supervisiondiary',
    props:{
      supervisiondiarylist:{
        type:Array,
        default: () => []
      }
    },
    data(){
      return{

      }
    },
    methods:{
      getBgColor(status) {
        switch(status) {
          case '等待审核':
            return 'rgb(236,245,255)';
          case '审核驳回':
            return 'rgb(254,240,240)';
          case '流程结束':
            return 'rgb(240,249,235)';
          default:
            return 'rgb(244,244,245)';
        }
      },
      getTextColor(status) {
        switch(status) {
          case '等待审核':
            return 'rgb(65,158,255)';
          case '审核驳回':
            return 'rgb(230,163,61)';
          case '流程结束':
            return 'rgb(108,196,65)';
          default:
            return 'rgb(144,147,153)';
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .supervisiondiary{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    .supervisiondiary-content{
      max-height: calc(100vh - 140px);
      padding: 10px 15px;
      overflow-y: auto;
      .supervisiondiary-content-item{
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 6px;
        background-color: white;
        .item-element{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
          .item-element-text1{
            margin-right: 8px;
            width: 70px;
            height: 20px;
            text-align: center;
            font-size: 13px;
            color: rgb(109,197,66);
            background-color: rgb(240,249,235);
          }
          .item-element-text2{
            flex: 1;
            font-size: 18px;
            color: rgb(52,67,100);
          }
          .item-element-title{
            font-size: 16px;
            font-weight: 350;
            text-align: left;
          }
          .item-element-content{
            flex: 1;
            text-align: left;
            font-size: 16px;
            font-weight: 400;
            color: rgb(122,137,168);
          }
        }
      }
    }
  }
</style>
